<!--右侧边栏-->
<div class="col-sm-3 col-12 postSide">
    <!--搜索框-->
    <!--            <div class="search-bar row">-->
    <!--                <div class="col-8">-->
    <!--                    <input type="text" class="form-control" id="keyword" placeholder="请输入关键字"/>-->
    <!--                </div>-->
    <!--                <div class="col-4" style="text-align:right;">-->
    <!--                    <button type="button" class="btn btn-primary">搜索</button>-->
    <!--                </div>-->
    <!--            </div>-->
    <!--最新文章-->
    <div class="side article-panel">
        <div class="col-12 tip"><i class="fa fa-coffee" aria-hidden="true"
                                   style="color: orange;padding-right: 10px"></i>热门文章
        </div>
        <div id="side_most_article">
            <!--ajax动态填充-->
        </div>
    </div>
    <div class="side article-panel" style="margin-top: 35px">
        <div class="col-12 tip"><i class="fa fa-coffee" aria-hidden="true"
                                   style="color: orange;padding-right: 10px"></i>文章推荐
        </div>
        <div id="side_recommend_article">
            <!--ajax动态填充-->
        </div>
    </div>
</div>


<script>
    // 自定义截取函数利用JS来截取字符串，中文1个，英文0.5个。
    function jstruncate(headline, length) {
        var count = 0;
        var output = '';
        for (var i in headline) {
            output += headline.charAt(i);
            var code = headline.charCodeAt(i);
            if (code <= 128) {
                count += 0.5;
            } else {
                count += 1;
            }
            if (count > length) {
                break;
            }
        }
        return output;
    }


    // jquery的方式发送ajax请求，获取接口json数据
    // html1+=``用反引号定义多行字符串或嵌入表达式
    // 在jQuery中表示文档加载完成后开始执行（不需要按钮或事件触发），window.load=function() {}
    $(document).ready(function () {
        // 第一步：发送Ajax请求去访问/recommend接口，获取JSON
        $.get('/api/most_recommend', function (data) {
            // 获取响应并动态填充到对应的推荐栏中
            var most_container = $('#side_most_article')
            var recommend_container = $('#side_recommend_article')
            let html1 = '<ul>';
            let html2 = '<ul>';
            if (data[0].length === 0) {
                html1 = '<p>暂无热门文章</p>';
            } else {
                data[0].forEach((post, index) => {
                    html1 += `<li><a href="/article/${post.id}">${index + 1}. ${jstruncate(post.headline,18)}...</a></li>`
                })
                html1 += '</ul>';
            }


            if (data[1].length === 0) {
                html2 = '<p>暂无推荐文章</p>';
            } else {
                data[1].forEach((post, index) => {
                    html2 += `<li><a href="/article/${post.id}">${index + 1}.${jstruncate(post.headline,18)}...</a></li>`
                })
                html2 += '</ul>';
            }

            most_container.html(html1);
            recommend_container.html(html2);
        })
    });

</script>